<template>
	<div class="front-padding" v-drag>
		<div class="tree-left bg-white">
			<div class="tit">菜单权限</div>
			<div class="title-menu">
				<el-button type="primary" size="small" @click="save">保存</el-button>
				<img src="../../../assets/images/nochoose.png" alt="" title="清空" class="icon" @click="clearCheckedAll">
				<img src="../../../assets/images/allchoose.png" alt="" title="全选" class="icon" @click="checkedAll">
				<img src="../../../assets/images/icon-toggle-up.png" alt="" title="合拢" class="icon" v-if="!isExpand" @click="expandNode">
				<img src="../../../assets/images/icon-toggle-down.png" alt="" title="展开" class="icon" v-else @click="expandNode">
			</div>
			<div class="tree bj">
				<el-scrollbar style="height: 100%;">
					<v-tree/>
				</el-scrollbar>
			</div>
		</div>
		<div class="tree-right bg-white">
			<v-menu/>
			<div class="table bj">
				<el-scrollbar style="height: 100%;">
					<v-table/>
				</el-scrollbar>
			</div>
		</div>
	</div>
</template>
<script>
import tree from './tree'
import menu from './menu'
import table from './table'
export default {
	components: {
		'v-tree': tree,
		'v-menu': menu,
		'v-table': table
	},
	data() {
		return {
			isExpand: false,
			menuStatus: this.$store.state.userGroupStore.menuStatus
		}
	},
	watch: {
		menuStatus(newVal) {
			if(newVal[0] === 4) {
				this.isExpand = !this.isExpand;
			}
		}
	},
	methods: {
		save() {
			this.$store.commit('userGroupStore/updateMenuStatus', 1);
		},
		clearCheckedAll() {		//清空
			this.$store.commit('userGroupStore/updateMenuStatus', 2);
		},
		checkedAll() {			//全选
			this.$store.commit('userGroupStore/updateMenuStatus', 3);
		},
		expandNode() {			//合拢展开
			this.$store.commit('userGroupStore/updateMenuStatus', 4);
		}
	},
	created() {
		this.$store.dispatch('userGroupStore/getTreeDataAndGetTableData');
	}
}
</script>
<style>
	.tree-left .title-menu {
		position: absolute;
		right: 10px;
		top: 10px;
	}
	.tree-left .title-menu .icon {margin-left: 3px;cursor: pointer;width: 14px;height: 14px;display: inline-block;}
	.title-menu > .el-button {padding: 5px 6px!important;}
</style>